{% extends 'blog/__base__.html' %}
{% block content %}
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <!--CSRF-->
<style>
h1 {
    text-align:center;
}
form {
    width:540px;
    margin:auto;
    padding:20px 50px;
    border:1px solid #0091f2;
    border-radius:10px;
    display:block;
}
input {
    font-size:24px;
    margin:10px;
}
.clear {
    clear:both;
}
.speed_box {
    width:440px;
    height:20px;
    display:none;
    border:1px solid #0091f2;
    border-radius:10px;
    overflow:hidden;
}
#file_box {
    min-width:440px;
    min-height:440px;
    border:1px solid #0091f2;
    border-radius:10px;
    display:inline-block;
    background:#EEE;
    overflow:hidden;
    z-index:999999;
}
#speed {
    width:0;
    height:100%;
    background:#0091f2;
    color:white;
    text-align:center;
    line-height:20px;
    font-size:16px;
}
#file_size,#file_type {
    display:inline-block;
    padding:0px 16px;
    font-size:16px;
    color:#0091f2;
    font-weight:bold;
}
#file_type {
    margin-top:30px;
}
.opts_btn {
    position:relative;
    display:inline-block;
    padding:8px 16px;
    font-size:16px;
    color:white;
    text-decoration:none;
    background:#0091f2;
    border:2px solid #0091f2;
    border-radius:3px;
    cursor:pointer;
    overflow:hidden;
}
.upfile {
    position:absolute;
    width:100%;
    height:100%;
    z-index:10;
    top:0px;
    left:0px;
    opacity:0;
}
.send_btn {
    display:inline-block;
    display:none;
    float:right;
    margin-top:20px;
    padding:8px 16px;
    font-size:16px;
    color:white;
    background:#0091f2;
    border:1px solid transparent;
    border-radius:2px;
    cursor:pointer;
}
</style>

<span>文件上传 进度条 **% 打开的如果是MP4视频能够播放 $ajax </span>

<form action="" method="" enctype="multipart/form-data">

    <a class="opts_btn" href="JavaScript:void(0)">
        <label id="opst_txt">选择上传文件</label>
        <input type="file" id="upfile" class="upfile" name="upfile" onchange="FileChangeFn(event)">
    </a>
    <label id="file_size"></label><br><br>
    <div id="file_box"></div>
    <div class="speed_box">
        <div id="speed">0%</div>
    </div>
    <label id="file_type"></label>
    <button type="button" class="send_btn" onclick="UploadFileFn()">开始上传文件</button>
    <div class="clear"></div>
</form>


<script>
var uploadUrl = "/blog/api_upfile_save/"; //后端url;
//文件选择完毕时
function FileChangeFn(event) {
    $('.opst_txt').text('重新选择文件');
    $('.send_btn').show();
    var event = event || window.event,
        dom = '',
        ofile = $("#upfile").get(0).files[0],
        otype = ofile.type || '获取失败',
        osize = ofile.size / 1054000,
        ourl = window.URL.createObjectURL(ofile); //文件临时地址
    $('#file_type').text("文件类型：" + otype);
    $('#file_size').text("文件大小：" + osize.toFixed(2) + "MB。");

    console.log("文件类型：" + otype); //文件类型
    console.log("文件大小：" + osize); //文件大小

    if ('video/mp4' == otype || 'video/avi' == otype || 'video/x-msvideo' == otype) {
        dom = '<video id="video" width="100%" height="100%" controls="controls" autoplay="autoplay" src=' + ourl + '></video>';
    }
    if ('audio/mp3' == otype || 'audio/wav' == otype  || 'audio/x-m4a' == otype) {
        dom = '<audio id="audio" width="100%" height="100%" controls="controls" autoplay="autoplay" loop="loop" src=' + ourl + ' ></audio>';
    }
    if ('image/jpeg' == otype || 'image/png' == otype || 'image/gif' == otype) {
        dom = '<img id="photo" width="100%" height="100%" alt="我是image图片文件" src=' + ourl + ' title="" />';
    }
    $('#file_box').html(dom);
};

//侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
function OnProgRess(event) {
    var event = event || window.event;
    //console.log(event);  //事件对象
    console.log("已经上传：" + event.loaded); //已经上传大小情况(已上传大小，上传完毕后就 等于 附件总大小)
    //console.log(event.total);  //附件总大小(固定不变)
    var loaded = Math.floor(100 * (event.loaded / event.total)); //已经上传的百分比  
    $("#speed").html(loaded + "%").css("width", loaded + "%");
};

//开始上传文件
function UploadFileFn() {

    $('.speed_box').show();
    var upfile = $("#upfile").get(0).files[0]; //input file标签
    //alert(oFile.name); // 获得上传文件名
    formData = new FormData(); //创建FormData对象
    xhr = $.ajaxSettings.xhr(); //创建并返回XMLHttpRequest对象的回调函数(jQuery中$.ajax中的方法)
    formData.append("upfile", upfile); //将上传name属性名(注意：一定要和 file元素中的name名相同)，和file元素追加到FormData对象中去
    //alert(formData.get("UploadForm[image]").name); // 获得上传文件名
    $.ajax({
        headers:{"X-CSRFToken":$.cookie('csrftoken')},  //#CSRF
        type: "POST",
        url: uploadUrl, // 后端服务器上传地址
        data: formData, // formData数据
        cache: false, // 是否缓存
        async: true, // 是否异步执行
        processData: false, // 是否处理发送的数据  (必须false才会避开jQuery对 formdata 的默认处理)
        contentType: false, // 是否设置Content-Type请求头
        xhr: function() {
            if (OnProgRess && xhr.upload) {
                xhr.upload.addEventListener("progress", OnProgRess, false);
                return xhr;
            }
        },
        success: function(returndata) {
            $("#speed").html("上传成功");
            alert(JSON.stringify(returndata));  
        },
        error: function(returndata) {
            $("#speed").html("上传失败");
            console.log(returndata);
            alert('请正确配置后台服务！');
        }
    });
};
</script>
{% endblock %}
